<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>自定义AngularJs指令</title>
     <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="dirController">

<my-driective my-attr="sada"></my-driective>
</div>
<script type="text/javascript">
  var app = angular.module("myApp",[]);
  app.controller("dirController",function(){

  });
  app.directive("myDriective",function(){
    return{
      restirct: 'E',
      contrller: 'dirController',
      replace: true,
      template: function(tElement,tAttrs){
        return "directive指令<span>{{myAttr}}</span>";
      }
    }
  });
</script>
</body>
</html>